<md-sidenav md-is-locked-open="$mdMedia('gt-sm')" md-component-id="left"
            class="md-whiteframe-z2 md-sidenav-left">
  <md-toolbar md-theme="custom" class="md-hue-1 md-whiteframe-z2">
    <md-button layout="row" layout-align="center center" class="md-toolbar-tools md-warn"
               href="https://github.com/flatlogic/angular-material-dashboard">
      <h1>AMD</h1>
    </md-button>
  </md-toolbar>
      <md-button ng-repeat-start="item in vm.menuItems" layout="column" layout-align="center center"
                 flex class="capitalize" ng-click="vm.selectItem(item)"
                 ui-sref-active="md-warn" ui-sref="{{item.sref}}">
          <div hide-sm hide-md class="md-tile-content">
              <i class="material-icons md-36">{{item.icon}}</i>
          </div>
          <div class="md-tile-content">
              {{item.name}}
          </div>
      </md-button>
      <md-divider ng-repeat-end></md-divider>
      <md-button ng-click="vm.showActions($event)" layout-align="center center">
          <div class="md-tile-content">
            Actions
          </div>
      </md-button>
</md-sidenav>

<div layout="column" flex>
    <md-toolbar layout="row" layout-align="center center">
        <section layout-align="start center" layout-fill flex>
            <md-button hide-gt-sm ng-click="vm.toggleItemsList()" aria-label="Menu">
                <i class="material-icons">menu</i>
            </md-button>
        </section>
        <section layout-align="end center">
            <md-button class="toolbar-button" aria-label="Search">
                <i class="material-icons">search</i>
            </md-button>
            <md-button class="toolbar-button" aria-label="Notifications">
                <i class="material-icons">notifications</i>
                <span class="notifications-label">7</span>
            </md-button>
            <md-button class="toolbar-button" aria-label="Settings" ng-click="vm.toggleRightSidebar()">
                <i class="material-icons">menu</i>
            </md-button>
        </section>
    </md-toolbar>

    <md-content flex class="md-padding page-content">
        <div ui-view></div>
    </md-content>
</div>

<md-sidenav md-component-id="right"
            class="md-whiteframe-z2 md-sidenav-right">
    <md-toolbar>
        <md-toolbar class="md-warn" layout="row" layout-align="center center">
            <img class="img-circle" ng-src="assets/images/feynman.jpg">
            <md-menu md-offset="0 20">
                <md-button class="capitalize" ng-click="$mdOpenMenu()" aria-label="Open menu">
                    <span>Richard Feynman</span>
                    <i class="material-icons">keyboard_arrow_down</i>
                </md-button>
                <md-menu-content width="3">
                    <md-menu-item><md-button ng-click="$mdCloseMenu()" ui-sref="home.profile">Profile</md-button></md-menu-item>
                    <md-menu-item><md-button ng-click="$mdCloseMenu()" ui-sref="home.dashboard">Log out</md-button></md-menu-item>
                </md-menu-content>
            </md-menu>
        </md-toolbar>
    </md-toolbar>

    <section>
        <md-toolbar md-theme="grey" class="md-hue-1">
            <div class="md-toolbar-tools">
                <h3>Messages</h3>
            </div>
        </md-toolbar>
        <div ng-include src="'app/views/partials/messages.html'"/>
    </section>
</md-sidenav>
